<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>增加采购订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-input .el-input__inner,
        .el-input.is-disabled .el-input__inner,
        .el-textarea .el-textarea__inner,
        .el-textarea.is-disabled .el-textarea__inner {
            color: #000;
            background-color: #fff;
        }
        .el-input-group__append{
            color: #000;
            background-color: #fff;
            border: none;
        }
    </style>
</head>

<body>
    <div id="app" class="minWidth">
        <el-form :model="form" ref="contract" :rules="rules" inline-message="true" style="width: 100%">
            <div class="table_titel">
                <div class="titel">商品信息</div>
            </div>

            <el-descriptions style="margin-bottom: 20px;" :column="2" border size="small">
                <el-descriptions-item label="商品名">
                    <el-form-item>
                        <el-input :disabled="true" v-model="Goods.Article_Name" placeholder="请输入商品名"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品规格">
                    <el-form-item>
                        <el-input :disabled="true" v-model="Goods.Specifications_Name" placeholder="请输入商品规格"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品数量">
                    <el-form-item>
                        <el-input :disabled="true" v-model="Goods.Quantity" placeholder="请输入商品数量"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品剩余数量">
                    <el-form-item>
                        <el-input :disabled="true" v-model="Goods.Remain_Quantity" placeholder="请输入商品剩余数量"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="起步购买数量">
                    <el-form-item>
                        <el-input :disabled="true" v-model="Goods.Starting_Quantity"
                            placeholder="请输入商品起步购买量"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="每次购买量">
                    <el-form-item>
                        <el-input :disabled="true" v-model="Goods.Unit_Quantity" placeholder="请输入商品每次购买量"></el-input>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <div class="table_titel">
                <div class="titel">采购订单信息</div>
            </div>
            <el-descriptions :column="3" border size="small">
                <el-descriptions-item label="供应商">
                    <el-form-item>
                        <el-select :disabled="true" v-model.trim="form.Supplier_SerialNumber" placeholder="请选择供应商"
                            filterable style="width: 100%">
                            <el-option v-for="(item,index) in supplier_info" :key="index" :label="item.Supplier_Name"
                                :value="item.Supplier_SerialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="订单金额">
                    <el-form-item prop="Purchase_Amount">
                        <el-input :disabled="true" v-model.trim="form.Purchase_Amount" placeholder="请输入订单金额">
                            <template slot="append" v-if="Transaction_Type=='0'">×{{paystages[selected].Full_Payment.Trading_Percentage}}%</template>
                        </el-input>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <div class="table_titel">
                <div class="titel">采购明细</div>
            </div>

            <el-descriptions :column="3" border size="small" v-for="(item,index) in form.Children.purchase_order_detail"
                :key="index">
                <el-descriptions-item label="品牌">
                    <el-form-item prop="Brand_SerialNumber">
                        <el-select :disabled="true" v-model.trim="item.Brand_SerialNumber"
                             placeholder="请选择品牌" filterable style="width: 100%">
                            <el-option v-for="(item,index) in brand" :key="index" :label="item.Brand_Name"
                                :value="item.Brand_SerialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品">
                    <el-form-item prop="Article_SerialNumber">
                        <el-input :disabled="true" v-model.trim="item.Article_Name" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="规格">
                    <el-form-item prop="Specifications_Name">
                        <el-input :disabled="true" v-model.trim="item.Specifications_Name"
                            placeholder="请输入规格"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品吊牌价">
                    <el-form-item prop="Article_UnitPrice">
                        <el-input :disabled="true" v-model.trim="item.Article_UnitPrice"
                            placeholder="请输入商品吊牌价"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="成交单价">
                    <el-form-item prop="Purchase_UnitPrice">
                        <el-input :disabled="true" v-model.trim="item.Purchase_UnitPrice"
                            placeholder="请输入成交单价"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="成交金额">
                    <el-form-item prop="Amount">
                        <el-input :disabled="true" v-model.trim="item.Amount" placeholder="请输入成交金额">
                            <template slot="append" v-if="Transaction_Type=='0'">×{{paystages[selected].Full_Payment.Trading_Percentage}}%</template>
                        </el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="付款类型">
                    <el-form-item>
                        <el-radio :disabled="JSON.stringify(paystages[radio].Full_Payment) == '{}'" @change="ChangeType" v-model="Transaction_Type" label="0">全款</el-radio>
                        <el-radio :disabled="paystages[radio].Payment_Days.length==0" @change="ChangeType" v-model="Transaction_Type" label="1">账期</el-radio>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="数量">
                    <el-form-item :prop="'Children.purchase_order_detail.'+index+'.Quantity'"
                        :rules="{required: true, message: '数量不能为空', trigger: 'blur' }">
                        <el-input-number v-model.trim="item.Quantity" @change="count" placeholder="请输入数量"
                            :step="parseInt(Goods.Unit_Quantity)" :step-strictly="true"
                            :min="parseInt(Goods.Starting_Quantity)"
                            :max="parseInt(Goods.Remain_Quantity)"></el-input-number>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="仓库">
                    <el-form-item :prop="'Children.purchase_order_detail.'+index+'.Store_SerialNumber'"
                        :rules="{required: true, message: '请选择仓库', trigger: 'change'}">
                        <el-select v-model="item.Store_SerialNumber" placeholder="请选择仓库">
                            <el-option v-for="item in Wares" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>

            <div class="table_titel">
                <div class="titel">
                    <span>付款周期</span>
                    <el-radio v-for="(value,key,index) in paystages" :key="key" v-model="radio" :label="key">查看方案{{toChinesNum(index+1)}}</el-radio>
                </div>
                <span>商品单价:{{paystages[radio].Unit_Price}}</span>
                <span>最低购买量:{{radio.replace('Min_','')}}</span>
                <!-- <span style="float: right; color: red;">当前适用方案:{{transformed(selected)}}</span> -->
            </div>
            <div style="margin-bottom: 100px;">
                <div v-if="JSON.stringify(paystages[radio].Full_Payment) != '{}'" style="padding: 5px;" :style="Transaction_Type=='0'&&radio==selected?'background-color: rgb(236, 228, 118);':''">
                    <div class="table_titel">
                        <div class="titel">
                            <span>全款细则{{Transaction_Type=='0'&&radio==selected?'(当前适用)':''}}</span>
                        </div>
                    </div>
                    <el-descriptions :column="4" border size="small">
                        <el-descriptions-item label="付款类型">
                            <el-form-item>
                                <el-input :disabled="true" v-model="paystages[radio].Full_Payment.Trading_Explain" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="优惠额度">
                            <el-form-item>
                                <el-input :disabled="true" v-model="paystages[radio].Full_Payment.Trading_Percentage">
                                    <template slot="append">%</template>
                                </el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="优惠后金额">
                            <el-form-item>
                                <el-input :disabled="true" :value="AccMul(form.Children.purchase_order_detail[0].Amount,(paystages[radio].Full_Payment.Trading_Percentage/100))" />
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <div v-if="paystages[radio].Payment_Days.length>0" style="padding: 5px;" :style="Transaction_Type=='1'&&radio==selected?'background-color: rgb(236, 228, 118);':''">
                    <div class="table_titel">
                        <div class="titel">
                            <span>步骤付款细则{{Transaction_Type=='1'&&radio==selected?'(当前适用)':''}}</span>
                        </div>
                    </div>
                    <el-descriptions v-for="(item,i) in paystages[radio].Payment_Days" :column="4" border size="small">
                        <el-descriptions-item label="付款阶段">
                            <el-form-item>
                                <el-input :disabled="true" v-model="item.Trading_Explain" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="付款额度">
                            <el-form-item>
                                <el-input :disabled="true" v-model="item.Trading_Percentage" >
                                    <template slot="append">%</template>
                                </el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="金额计算">
                            <el-form-item>
                                <el-input :disabled="true" :value="AccMul(form.Children.purchase_order_detail[0].Amount,(item.Trading_Percentage/100))" />
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

            </div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="CheckStore('contract')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="./js/SupplierGoods.js"></script>
</body>

</html>